<template>
  <tr>
    <td scope="col"><input v-model="item.checked" type="checkbox" /></td>
    <td scope="col">{{ item.name }}</td>
    <td scope="col">{{ item.price }}</td>
    <td scope="col">
      <button @click="item.num > 0 ? item.num-- : 0" class="butw btn btn-dark">-</button>
      {{ item.num }}
      <button @click="item.num++" class="butw btn btn-dark">+</button>
    </td>
    <td scope="col">{{ sum }}</td>
    <td scope="col">
      <button type="button" @click="remove" class="btn btn-danger">Danger</button>
    </td>
  </tr>
</template>

<script>
export default {
  props: ['goodList', 'item', 'index'],
  methods: {
    remove() {
      this.goodList.splice(this.index, 1)
    }
  },
  computed: {
    sum() {
      return this.item.price * this.item.num
    }
  }
}
</script>

<style></style>
